<template>
	<view class="tabbar">
		<view class="tabbar-list">
			<view class="tabbar-list-ul">
				<view class="tabbar-list-li" v-for="(item,index) in tabBar.list" :key='index' @click="setSelected(index)">
					<view class="tabbar-list-li-icon">
						<img :src="selected == index ? item.selectedIconPath : item.iconPath" alt="">
					</view>
					<view :class="selected == index ? 'tabbar-list-li-name active' : 'tabbar-list-li-name'">{{item.Text}}</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['selected'],
		data(){
			return {
				tabBar:{
					list:[
						{
							pagePath:'/pages/index/index',
							iconPath:'/static/tabbar-Img/shouye.png',
							selectedIconPath:'/static/tabbar-Img/shouye-selected.png',
							Text:'首页'
						},
						{
							pagePath:'/pages/question/index',
							iconPath:'/static/tabbar-Img/timu.png',
							selectedIconPath:'/static/tabbar-Img/timu-selected.png',
							Text:'试题'
						},
						{
							pagePath:'/pages/process/index',
							iconPath:'/static/tabbar-Img/liucheng.png',
							selectedIconPath:'/static/tabbar-Img/liucheng-selected.png',
							Text:'流程'
						},
						{
							pagePath:'/pages/MyContract/index',
							iconPath:'/static/tabbar-Img/qianshuxieyi.png',
							selectedIconPath:'/static/tabbar-Img/xieyizhihangs.png',
							Text:'消息'
						},
						{
							pagePath:'/pages/My/index',
							iconPath:'/static/tabbar-Img/wode.png',
							selectedIconPath:'/static/tabbar-Img/wods.png',
							Text:'我的'
						}
					]
				}
			}
		},
		methods: {
			setSelected(index) {
				uni.switchTab({
					url:this.tabBar.list[index].pagePath
				})
			}
		}
	}
</script>

<style scoped>
	.tabbar {
		width: 100%;
		position: fixed;
		box-sizing: border-box;
	}
	.tabbar-list {
		width: 100%;
		color: #344356;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		box-shadow: 0rpx 12rpx 37rpx 0rpx rgba(230,235,243,.9);
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		box-sizing: border-box;
	}
	.tabbar-list-ul {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: space-around;
		box-sizing: border-box;
	}
	.tabbar-list-li-icon {
		width: 56rpx;
		height: 56rpx;
		margin: 0 auto;
		padding: 20rpx;
	}
	.tabbar-list-li-icon img {
		width: 100%;
		height: 100%;
	}
	.tabbar-list-li-name {
		width: 100%;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 28rpx;
		font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	}
	.active {
		color:skyblue;
	}
</style>